<@override name="content">
<div id="app">
    <el-container v-loading="loading">
        <el-main>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="标签名称：">
                    <el-input v-model.trim="queryData.content" size="mini" placeholder="请输入" clearable></el-input>
                </el-form-item>

                <el-form-item label="" class="itemTime">
                    <el-button type="primary" class="lastItem" size="mini" @click="getList">查询</el-button>
                    <el-button type="primary" class="lastItem" size="mini"@click="addClick()">新建</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="标签名称"
                        width="220">
                </el-table-column>
                <el-table-column
                        label="标签类型"
                        width="180">
                    <template slot-scope="scope">
                        <el-tag size="mini" :type="scope.row.type">{{scope.row.typeName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间">
                    <template slot-scope="scope">{{ moment(scope.row.createAt).format('YYYY-MM-DD HH:mm:ss') }}</template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="140">
                    <template slot-scope="scope">
                        <el-link @click="updateClick(scope.row)" type="primary">修改</el-link>
                        <el-link @click="deleteClick(scope.row)" type="danger">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pageBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="queryData.pageNum" :page-sizes="[10, 20, 50, 100]"
                               :page-size="queryData.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="count" background>
                </el-pagination>
            </div>

        </el-main>

    </el-container>

    <el-dialog :title="addForm.id?'编辑标签':'新增标签'" :visible.sync="dialogVisible">
        <el-form :model="addForm">
            <el-form-item label="标签名称" label-width="100px" required>
                <el-input size="small" v-model="addForm.content" placeholder="请输入标签名称"  maxlength="10"
                          show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="标签类型"  label-width="100px" required>
                <el-select size="small" v-model="addForm.type" placeholder="请选择标签类型" style="width: 100%">
                    <el-option v-for="item in tagList" :label="item.value"
                               :key="item.key" :value="item.key">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/res/js/page/tagsPage.js"></script>
<style scoped>
    .item-w{
        width: 500px;
    }
    .pageBox {
        margin-top: 20px;
        text-align: right;
    }
</style>
</@override>




<!-- extends 一定要写在页面最下方 -->
<@extends name="_base.html"/>